<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../static/css/font.css">
		<link rel="stylesheet" href="../static/css/weadmin.css">
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

		<style>
			.a {
				display: flex;
			}
			.main .ma .mam .mam1{
				display: flex;
				justify-content:flex-end;
				flex: 1;
			}
		</style>

	</head>

	<body>
		<div class="weadmin-body">
			<!-- 留 -->
			<!-- <blockquote class="layui-elem-quote">欢迎使用WeAdmin 后台模版！</blockquote> -->
			<div class="weadmin-block">
				<button class="layui-btn" onclick="WeAdminShow('发布电影','/admin/film/add',800)">发布电影</button>
				<span class="layui-laypage-count" style="line-height:40px"></span>
			</div>
			<!-- 饼图与柱状图 -->
			<div class="layui-card">
				<div class="layui-card-header">什么图111111111？</div>
				<div class="layui-card-body a">
					<div id="main" style="width: 46%;height:400px;"></div>
					<div id="ma" style="width: 46%;;height:400px;"></div>
				</div>
			  </div>
						<!--WeAdmin公告-->
						<div class="layui-card">
							<div class="layui-card-header layui-elem-quote">WeAdmin公告</div>
							<div class="layui-card-body">
								<div class="layui-carousel weadmin-notice" lay-filter="notice" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
									<div carousel-item="">
										<div class="">
											<a href="https://gitee.com/lovetime/WeAdmin" target="_blank" class="layui-bg-red">2018年3月28日 WeAdmin小版本更新</a>
										</div>
										<div class="">
											<a href="http://www.layui.com/admin/" target="_blank" class="layui-bg-blue">首款 layui 官方后台模板系统正式发布</a>
										</div>
										<div class="">
											<a href="http://fly.layui.com/jie/24231/" target="_blank" class="layui-bg-green">Layui 官方发布 layuiAdmin iframe 多标签页版本</a>
										</div>

									</div>
									<div class="layui-carousel-ind">
										<ul>
											<li class="layui-this"></li>
											<li></li>
										</ul>
									</div>
									<!--<button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
									<button class="layui-icon layui-carousel-arrow" lay-type="add"></button>-->
								</div>

							</div>
						</div>


		</div>
	</body>




	<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.extend({
			admin: '{/}../static/js/admin',
		});
		layui.use(['jquery', 'element','util', 'admin', 'carousel'], function() {
			var element = layui.element,
				$ = layui.jquery,
				carousel = layui.carousel,
				util = layui.util,
				admin = layui.admin;
			//建造实例
			carousel.render({
				elem: '.weadmin-shortcut'
				,width: '100%' //设置容器宽度				
				,arrow: 'none' //始终显示箭头	
				,trigger: 'hover'
				,autoplay:false
			});
			carousel.render({
				elem: '.weadmin-notice'
				,width: '100%' //设置容器宽度				
				,arrow: 'none' //始终显示箭头	
				,trigger: 'hover'
				,autoplay:true
			});
			
			$(function(){
				setTimeAgo(2018,0,1,13,14,0,'#firstTime');
				setTimeAgo(2018,2,28,16,0,0,'#lastTime');
			});
			function setTimeAgo(y, M, d, H, m, s,id){
			    var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
			    $(id).html(str);
			    console.log(str);
			 };
		});
	</script>


<!-- 饼图 -->
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	myChart.setOption({
		series : [
			{
				name: '访问来源',
				type: 'pie',    // 设置图表类型为饼图
				radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
				data:[          // 数据数组，name 为数据项名称，value 为数据项值
					{value:235, name:'视频广告'},
					{value:274, name:'联盟广告'},
					{value:310, name:'邮件营销'},
					{value:335, name:'直接访问'},
					{value:400, name:'搜索引擎'}
				]
			}
		],
    	legend: {
			orient: 'vertical',
			left: 'left',
			data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
		title: {
			text: '某站点用户访问来源',
			subtext: '纯属虚构',
			left: 'center'
    			}
	})
</script>


<script>
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('ma'));
	$,ajax({
		url:'/admin/welcome/api',
		method:"get",
		dataType:"json",
		success:function(data){
			var option = {
	 title: {
		 text: '第一个 ECharts 实例'
	 },
	 tooltip: {trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
	 legend: {
		 data:res.data
	 },
	 xAxis: {
		 data: []
	 },
	 yAxis: {},
	 series: [{
		 name: '销量',
		 type: 'bar',
		 data:res.data,
		 color:"#9a60b4"
	 }]
	}
}
	});
 myChart.setOption(option);

});
</script>

</html>